<template>
    <div class="w-full h-screen flex justify-center items-center">
        <div class="absolute top-0 end-2">
            <ThemeSwitch></ThemeSwitch>
        </div>
        <div class="text-center text-gray-800">
            <h1 class="text-lg">幸运号码</h1>
            <Clock class="text-sm mt-1"></Clock>
            <div class="mt-2 flex items-center">
                <div>
                    <el-button @click="gotoPage('dlt')">大乐透</el-button>
                    <div class="my-1">
                        <el-tooltip>
                            <template #content>大乐透：每周一、三、六 21:25 开奖</template>
                            一、三、六
                        </el-tooltip>
                    </div>
                    <div>
                        <el-link href="https://www.lottery.gov.cn/dlt/index.html" target="_blank"
                            title="中国体育彩票">进入官网</el-link>
                    </div>
                </div>
                <div class="ml-4">
                    <el-button @click="gotoPage('ssq')">双色球</el-button>
                    <div class="my-1">
                        <el-tooltip>
                            <template #content>双色球：每周二、四、日 21：15 开奖</template>
                            二、四、日
                        </el-tooltip>
                    </div>
                    <div>
                        <el-link href="https://www.cwl.gov.cn/ygkj/kjgg/" target="_blank" title="中国福利彩票">进入官网</el-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import ThemeSwitch from '@/components/ThemeSwitch.vue';
import Clock from '@/components/clock/Clock.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const gotoPage = (v) => {
    router.push((window.screen.width < 768) ? `/${v}/h5` : `/${v}/wave`);
}
</script>